import 'dart:async';

import 'package:enterprise_v6_app/app/core/core.dart';

/// webview自定义气体分析倒计时-超时
///[milliseconds] 倒计时毫秒数
/// [title]  倒计时标题
/// [divisionColors]  分割颜色
class CustomWebGasCountDownPage extends StatefulWidget {
  const CustomWebGasCountDownPage({
    required this.milliseconds,
    this.color,
    this.title = '',
    this.fontColor,
    this.divisionColors,
    super.key,
  });

  final int milliseconds;
  final String title;
  final Color? color;
  final Color? divisionColors;
  final TextStyle? fontColor;

  @override
  State<CustomWebGasCountDownPage> createState() => _CustomWebGasCountDownPageState();
}

class _CustomWebGasCountDownPageState extends State<CustomWebGasCountDownPage> {
  late Timer _timer;
  int _remainingMilliseconds = 0;

  @override
  void initState() {
    super.initState();
    _remainingMilliseconds = widget.milliseconds;
    //开启计时
    _startTimer();
  }

  @override
  void dispose() {
    _timer.cancel();
    super.dispose();
  }

  void _startTimer() {
    _timer = Timer.periodic(const Duration(milliseconds: 1000), (timer) {
      setState(() {
        _remainingMilliseconds -= 1000;
      });
    });
  }

  ///转换为两位数
  String twoDigits(int n) {
    if (n >= 10) return '$n';
    return '0$n';
  }

  ///获取计时显示样式
  Widget _getTimingView(String value) {
    return Container(
      width: 25,
      height: 25,
      decoration: BoxDecoration(
        gradient: _remainingMilliseconds > 0
            ? const LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                colors: [
                  Color(0xB20D95DC),
                  Color(0xB200FFFB),
                ],
              )
            : const LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                colors: [
                  Color(0xCCFF4141),
                  Color(0xCCFFD6D6),
                ],
              ),
        borderRadius: BorderRadius.circular(4),
      ),
      alignment: Alignment.center,
      child: Text(
        value,
        style: const TextStyle(
          color: Color(0xFFFFFFFF),
          fontWeight: FontWeight.w500,
          fontSize: 14,
        ),
      ),
    );
  }

  ///分割线
  Widget _getTimingSegmentation() {
    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 6),
      child: Text(
        ':',
        style: TextStyle(
          height: 1.2,
          color: widget.divisionColors ?? Colors.white,
          fontSize: 20,
        ),
      ),
    );
  }

  ///倒计时
  Widget _getCountDown() {
    final Duration duration = Duration(milliseconds: _remainingMilliseconds);
    final String twoDigitHours = twoDigits(duration.inHours);
    final String twoDigitMinutes = twoDigits(duration.inMinutes.remainder(60));
    final String twoDigitSeconds = twoDigits(duration.inSeconds.remainder(60));

    return Row(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Text('${widget.title}倒计时', style: widget.fontColor),
        const SizedBox(
          width: 8,
        ),
        _getTimingView(twoDigitHours),
        _getTimingSegmentation(),
        _getTimingView(twoDigitMinutes),
        _getTimingSegmentation(),
        _getTimingView(twoDigitSeconds),
      ],
    );
  }

  ///超时
  Widget _getTimeout() {
    final Duration duration = Duration(milliseconds: _remainingMilliseconds);
    final int totalSeconds = duration.inSeconds.abs();
    final String twoDigitHours = twoDigits(totalSeconds ~/ 3600);
    final String twoDigitMinutes = twoDigits((totalSeconds % 3600) ~/ 60);
    final String twoDigitSeconds = twoDigits(totalSeconds % 60);
    return Row(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Text(
          '${widget.title}已超时',
          style: widget.fontColor,
        ),
        const SizedBox(
          width: 8,
        ),
        _getTimingView(twoDigitHours),
        _getTimingSegmentation(),
        _getTimingView(twoDigitMinutes),
        _getTimingSegmentation(),
        _getTimingView(twoDigitSeconds),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        padding: const EdgeInsets.symmetric(horizontal: 10),
        alignment: Alignment.center,
        color: widget.color,
        height: 40,
        child: _remainingMilliseconds > 0 ? _getCountDown() : _getTimeout());
  }
}
